<template>
  <div class="padding">
    <div class="question_type">
      <el-button type="text" @click="checkType(0)" :class="params.sortType==0?'check_btn':''">默认</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="text" @click="checkType(1)" :class="params.sortType==1?'check_btn':''">答题模式</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="text" @click="checkType(2)" :class="params.sortType==2?'check_btn':''">背题模式</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-tooltip class="item" effect="dark" content="重置搜索" placement="top">
        <el-button
          type="text"
          style="margin-left: 10px; color:#409eff;"
          icon="el-icon-refresh"
          @click="reload"
        />
      </el-tooltip>

      <!-- 搜索 -->
      <div class="search">
        <el-input v-model="params.searchValue" placeholder="搜索课程" prefix-icon="el-icon-search">
          <el-button type="primary" slot="append" icon="el-icon-search" @click="searchCourse"></el-button>
        </el-input>
      </div>
    </div>

    <q-card :List="list" :qsModel="qsModel" @click="toDetail" />
    <el-empty v-show="total==0" />

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="getList"
      style="margin-top: 40px"
    />
  </div>
</template>

<script>
import { getList } from "@/api/question";
import QCard from "./comp/card.vue";
import Pagination from "@/components/Pagination";
import qu_mixin from "./qu_mixin";

export default {
  components: {
    QCard,
    Pagination
  },
  mixins: [qu_mixin],
  data() {
    return {
      list: [],
      params: {
        pageNum: 1,
        pageSize: 8,
        sortType: 0,
        searchValue: null
      },
      total: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await getList(this.params);
      this.list = res.data.rows;
      this.total = res.data.total;
    },
    reload() {
      this.params.pageNum = 1;
      this.params.searchValue = null;
      this.params.sortType = 0;
      this.getList();
    },
    checkType(type) {
      if (type !== this.params.sortType) {
        this.params.sortType = type;
        this.getList();
      }
    },
    searchCourse() {
      if (this.params.searchValue !== null && this.params.searchValue !== "") {
        this.getList();
      }
    }
  }
};
</script>

<style scoped>
.padding {
  padding: 0 10%;
}

.question_type {
  padding: 30px 0 0 60px;
}

.question_type .check_btn {
  color: #409eff;
}
.question_type button {
  font-size: 18px;
  color: gray;
}

.question_type .search {
  display: block;
  float: right;
  padding-right: 30px;
}

.question_type .search {
  margin-right: 15px;
  color: white;
}

.question_type .search .el-button {
  background-color: #409eff;
  border-radius: 0 4px 4px 0;
  border: 1px solid #409eff;
  color: white;
  font-size: 14px;
}

.question_type .search .el-button:hover {
  transform: scale(1.05);
  transition: all 0.2s;
}
</style>
